<template>
   <div class="nav">
        <van-tabs v-model="active" swipeable animated fixed >
            <van-tab v-for="index,i in arr" :title="index" :key="i" class="van-tab1">
                <div class="content" v-for="i of 20" :key="i">
                    <div  @click = "lz"></div>
                    <div></div>
                </div>
            </van-tab>
        </van-tabs>
   </div>

</template>

 
<script>
export default {
    data(){
        return {
            arr:['元气满满','瑞幸自营','颜值水杯','糕点零食'],
            active:"1"
        }
    },
    methods:{
        lz(){
            this.$router.push('/my')
        }
    }
     
}
</script>
<style scoped>
.van-tabs__nav{
    top: 0 !important;
    position:fixed !important;
}
.content{
    width: 80%;
    height: 200px;
    margin: 0 auto;
}
.van-tab1 .content div:nth-child(even){
    display: inline-block;
    width: 48%;
    height: 200px;
    border: 1px solid red;
}
.content div:nth-child(odd){
    display: inline-block;
     width: 45%;
    height: 200px;
    border: 1px solid olive;
    margin-right: 5%;
}
</style>